<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>新增</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>李超</span>
        </el-header>

        <el-main>
            <div style="text-align: center">
                <el-button type="primary"  @click="dialogZkConfig = true">新增zk服务器配置</el-button>
            </div>
            <el-dialog title="zk服务器配置" :visible.sync="dialogZkConfig" width="30%">
                <el-form :model="form">
                    <el-form-item label="IP地址" :label-width="formLabelWidth">
                        <el-input v-model="form.ip" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="端口" :label-width="formLabelWidth">
                        <el-input v-model="form.port" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button round @click="dialogZkConfig = false">连接测试</el-button>
                    <el-button type="primary" @click="connect()">确 定</el-button>
                    <el-button @click="dialogZkConfig = false">取 消</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</div>
<!-- 先引入 Vue -->
<script src="element/vue.js"></script>
<!-- 引入组件库 -->
<script src="element/index.js"></script>
<!-- axios -->
<script src="element/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dialogZkConfig: false,
                form: {
                    ip: '',
                    port: ''
                },
                session:{
                    id: ''
                },
                formLabelWidth: '60px'
            };
        },
        methods: {
            connect() {
                let ip = this.form.ip;
                let port = this.form.port;
                console.log("ip:" + ip + ",port:" + port);
                axios({
                    method: 'post',
                    url: '/connect',
                    data: {
                        ip : ip,
                        port : port
                    }
                }).then(response => {
                    let data = response.data;
                    if (data) {
                        let sessionId = data.sessionId;
                        this.session.id = sessionId;
                        alert("sessionId:" + sessionId);
                        this.dialogZkConfig = false;
                    } else {
                        alert("请求错误");
                    }
                });
            },
            loadNode1(node, resolve) {
                if (node.level === 0) {
                    return resolve([{label: '/'}]);
                }
                // if (node.level > 1) return resolve([]);

                this.requestNode(node, resolve);
            },
            // 请求节点所有子节点
            requestNode(node, resolve) {
                let path = this.getAbsolutePath(node);
                axios({
                    method: 'post',
                    url: '/listNode',
                    data: {
                        path: path
                    }
                }).then(function (response) {
                    let data = response.data;
                    if (data) {
                        let result = [];
                        data.forEach(item => result.push({label: item}));
                        resolve(result);
                    } else {
                        resolve([]);
                    }
                });
            },
            // 获取绝对路径
            getAbsolutePath(node) {
                let parentPath = "";
                if (node.level > 1 && node.parent) {
                    parentPath = this.getAbsolutePath(node.parent);
                }
                if (node.level <= 2) {
                    return parentPath + node.data.label;
                } else {
                    return parentPath + "/" + node.data.label;
                }
            },
            clickNode(obj, node) {
                let path = this.getAbsolutePath(node);
                axios({
                    method: 'post',
                    url: '/getNodeData',
                    data: {
                        path: path
                    }
                }).then(function (response) {
                    let data = response.data;
                    console.log(data);
                });
            }
        }
    });
</script>
</body>
</html>